<template>
  <div
    class="operation-button"
    @mouseenter="show = true"
    @mouseleave="show = false"
    :class="{
      'operation-button-inactive': !window.isActive()
    }"
  >
    <div class="item red" @click="window.close()">
      <close-small v-show="show" theme="outline" size="16" fill="#000" :strokeWidth="4" />
    </div>
    <div
      v-if="window.content.size.minimize && !window.parent"
      class="item yellow"
      @click="window.switchMinimize()"
    >
      <minus v-show="show" theme="outline" fill="#000" :strokeWidth="4" />
    </div>
    <div v-else v-show="showDisable" class="item disable"></div>
    <div
      v-if="window.content.size.maximize && !window.content.size.fullscreen"
      class="item green"
      @click="window.switchMaximize()"
    >
      <plus v-show="show" theme="outline" size="16" fill="#000" :strokeWidth="4" />
    </div>
    <!--    允许resize和最大化的窗口,且当前不是窗口不是全屏才可以显示这个最大化按钮-->
    <div
      v-else-if="
        (window.content.size.resizeVertical || window.content.size.resizeHorizontal) &&
        window.content.size.fullscreen &&
        window.getStatus() !== 'fullscreen'
      "
      class="item green"
      @click="window.switchFullscreen()"
    >
      <svg
        v-show="show"
        viewBox="0 0 200 200"
        xmlns="http://www.w3.org/2000/svg"
        width="200"
        height="200"
      >
        <polygon points="50,50 50,120 120,50" style="fill: black; stroke: black; stroke-width: 2" />
        <polygon
          points="150,150 150,80 80,150"
          style="fill: black; stroke: black; stroke-width: 2"
        />
      </svg>
    </div>
    <!--    当前窗口是全屏时显示缩小按钮-->
    <div
      v-else-if="window.getStatus() === 'fullscreen'"
      class="item green"
      @click="window.switchFullscreen()"
    >
      <svg
        v-show="show"
        viewBox="0 0 200 200"
        xmlns="http://www.w3.org/2000/svg"
        width="200"
        height="200"
      >
        <polygon points="90,90 20,90 90,20" style="fill: black; stroke: black; stroke-width: 2" />
        <polygon
          points="110,110 110,180 180,110"
          style="fill: black; stroke: black; stroke-width: 2"
        />
      </svg>
    </div>
    <div v-else v-show="showDisable" class="item disable"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { CloseSmall, Minus, Plus } from "@icon-park/vue-next"
import type BiuOS from "@/core/biu-os"

defineProps({
  window: {
    type: Object as () => BiuOS.Window,
    required: true
  },
  showDisable: {
    type: Boolean,
    required: false,
    default: true
  }
})

const show = ref(false)
</script>

<style scoped lang="scss">
.operation-button {
  width: 0.5rem;
  height: 0.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .item {
    width: 0.14rem;
    height: 0.14rem;
    border-radius: 50%;
    border: rgba(150, 150, 150, 0.5) 0.5px solid;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .red {
    background-color: #e74c3c;
  }

  .yellow {
    background-color: #f1c40f;
  }

  .green {
    background-color: #2ecc71;
  }

  .disable {
    background-color: #dcdcdc;
  }
}
</style>
<style lang="scss">
.operation-button {
  .item {
    font-size: 0.12rem;

    > span {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 1em;
      height: 1em;
    }
  }
}

.operation-button-inactive {
  pointer-events: none;

  .item {
    background-color: #bababa !important;
  }
}
</style>
